<template>
	<div class="concept">
		<div style="width:342px;margin-right:10px;" class="bg">
			<left-tree :data="data" :title="title" :keyId="'id'" :type="3" @filterHandle="filterHandle" @importHandle="importHandle" :fieldList="[]" @reloadHandle="reloadHandle" :searchData="searchData" :loading="loading" :isEdit2="isEdit" @nodeClick="nodeClick" @ok="getList" @remove="remove" ref="leftTree"></left-tree>
		</div>

		<div class="bg rightTable" v-loading="loading">
			<h3 class="code-title">
				{{rightTitle}}
			</h3>
			<el-divider></el-divider>

			<!-- form表单 -->
			<div class="concept-form">
				<el-form :model="form" label-width="110px" :rules="rules" ref="form">
					<el-form-item label="概念名称：" prop="name">
						<span style="color:#606266;" v-if="!isEdit">{{form.name}}</span>
						<el-input v-model="form.name" v-else></el-input>
					</el-form-item>
					<el-form-item label="概念示例：" prop="instance">
						<span style="color:#606266;" v-if="!isEdit">{{form.instance}}</span>
						<el-input v-model="form.instance" v-else></el-input>
					</el-form-item>
					<el-form-item label="概念释义：" prop="definition">
						<span style="color:#606266;" v-if="!isEdit">{{form.definition}}</span>
						<el-input v-model="form.definition" v-else></el-input>
					</el-form-item>
					<el-form-item label="概念备注：" prop="remark">
						<span style="color:#606266;" v-if="!isEdit">{{form.remark}}</span>
						<el-input v-model="form.remark" v-else></el-input>
					</el-form-item>
					<el-form-item label="概念来源：" prop="origin">
						<span style="color:#606266;" v-if="!isEdit">{{form.origin}}</span>
						<el-input v-model="form.origin" v-else></el-input>
					</el-form-item>
					<el-form-item label="创建时间：" v-if="form.createTime">
						<span style="color:#606266;" v-if="!isEdit">{{form.createTime}}</span>
						<el-input v-model="form.createTime" disabled v-else></el-input>
					</el-form-item>
					<el-form-item label="创建人：" v-if="form.createBy">
						<span style="color:#606266;" v-if="!isEdit">{{form.createName}}</span>
						<el-input v-model="form.createName" disabled v-else></el-input>
					</el-form-item>

					<div style="text-align:center;padding:16px 10px;">
						<el-button type="primary" @click="editForm" v-if="!isEdit" class="w96">编辑</el-button>
						<template v-if="isEdit">
							<el-button type="primary" @click="handleSave" class="w96">确定</el-button>
							<el-button @click="handleCancel" class="w96">取消</el-button>
						</template>

						<el-popconfirm title="确认删除吗？" @confirm="handleDelete" v-if="form.id">
							<el-button type="danger" class="w96" slot="reference" style="margin-left:10px;">删除</el-button>
						</el-popconfirm>

					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import { standardTreeList } from "@/api/dataManagement/standard/index";
	import {uploadImportExcel } from "@/api/dataManagement/standard/dict";
	import { getConcept, editConcept, deleteConcept ,searchFindBusinessCode } from "@/api/dataManagement/standard/concept";
	import leftTree from '../modules/leftTree'
	export default {
		components: {
			leftTree,
		},
		data() {
			return {
				title: '行业概念目录',
				loading: false,
				isEdit: false,
				data: [],
				form: {},
				rules: {
					name: [
						{ required: true, message: "概念名称不能为空", trigger: "blur" }
					],
					instance: [
						{ required: true, message: "概念示例不能为空", trigger: "blur" }
					],
					definition: [
						{ required: true, message: "概念释义不能为空", trigger: "blur" }
					],
					remark: [
						{ required: true, message: "概念备注不能为空", trigger: "blur" }
					],
					origin: [
						{ required: true, message: "概念来源不能为空", trigger: "blur" }
					],

				},
				rightTitle: '',
				searchData:[
					{
						label:'按目录',
						value:'0'
					},
					{
						label:'按概念名',
						value:'1'
					}
				]
			}
		},
		created() {
			this.getList(1)
			this.getForm(this.$route.query.id)
		},
		methods: {
			// 树形查询
			getList(arg) {
				this.loading = true
				standardTreeList({ child_type: 0, type: 3 }).then(res => {
					if (res.code == 200) {
						this.data = [{ id: 'root', name: '行业概念', level: -1, type: 3, childrens: res.data }]
						this.$refs.leftTree.getMaxFloor(res.data)
						if (arg == 1) {
							this.$refs.leftTree.setHeightLight()
						}
					}
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			getForm(id) {
				if (!id) return false
				this.loading = true
				getConcept(id).then(res => {
					if (res.code == 200) {
						if (res.data) {
							this.form = res.data
						} else {
							this.clearForm()
						}
					}
					this.loading = false
				}).catch(() => { this.loading = false })
			},
			nodeClick(data) {
				console.log(data)
				if (this.isEdit) {
					this.$message({
						type: 'warning',
						message: '请先保存修改！'
					})
					return false
				}
				if (data.id == 'root' && this.$route.query.id) {
					this.$refs.leftTree.setHeightLight()
				}
				else if (data.id != 'root' && this.$route.query.id != data.id) {
					this.$router.push({ query: { id: data.id } })
					this.rightTitle =  data.dirPath.replace(/\>/g,'/')
					this.getForm(data.id)
				}
			},
			importHandle(data){
					// 1：数据字典，2：编码目录，3：行业概念）
				this.loading =  true
				uploadImportExcel(3,data).then(res=>{
					this.$message({
						type: 'success',
						message: '导入行业概念成功'
					})
					this.getList(1)
				})
			},
			/** 表单事件 */
			editForm() {
				if (!this.$route.query.id) {
					this.$message({
						type: 'warning',
						message: '请选中一项！'
					})
					return false
				}
				this.isEdit = true
			},
			handleSave() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						let params = {
							...this.form,
							treeId: this.$route.query.id
						}
						if (this.loading) return false
						this.loading = true
						editConcept(params).then(res => {
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: res.msg
								})
								this.isEdit = false
								this.getForm(this.$route.query.id)
								this.$refs.leftTree.setHeightLight()
							}
							this.loading = false
						}).catch(() => { this.loading = false })
					}
				})
				// this.isEdit = false
			},
			handleCancel() {
				this.isEdit = false
				this.resetForm("form");
				this.getForm(this.$route.query.id)
				this.$refs.leftTree.setHeightLight()
			},
			handleDelete() {
				if (this.loading) return false
				this.loading = true
				deleteConcept(this.form.id).then(res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.getForm(this.$route.query.id)
					}
					this.loading = false
				}).catch(() => { this.loading = false })
			},
			clearForm() {
				this.form = {
					name: '',
					instance: '',
					definition: '',
					remark: '',
					origin: ''
				}
			},
			remove(){
				this.rightTitle = ''
			},
			// 按概念名搜索
			filterHandle(keyword){
				this.loading=true;
				searchFindBusinessCode({businessName:keyword}).then(res=>{
					if (res.code == 200) {
						var dataList = getList(res.data);
						this.data = dataList.length>0 ? [{ id: 'root', name: '行业概念', level: -1, type: 3, childrens: dataList }] :[]
						this.$refs.leftTree.getMaxFloor(dataList)
						this.$refs.leftTree.setHeightLight()
						this.loading = false;
					}
				}).catch(()=>{
					this.loading = false;
				})
				function getList (data){
					for(var i=0;i<data.length;i++){
						if(data[i].childType == 1) {
							data[i].childrens  =[]
						} else {
							if(data[i].childrens) {
								getList (data[i].childrens)
							}
						}
					}
					return data;
				};
			},
			reloadHandle(type){
				if(type!='按目录') {
					this.data = [];
					return;
				}
				this.getList(1)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.concept {
		margin: 0px 0px 30px 0px;
		padding: 0 10px;
		min-width: 1000px;
		display: flex;
		min-height: calc(100vh - 124px);
		.bg {
			background: #ffffff;
			padding: 20px 16px;
		}
		.code-title {
			border-left: 4px solid #1183f8;
			padding-left: 10px;
			line-height: 20px;
			height: 20px;
			font-weight: 400;
			font-size: 18px;
			margin: 0 0 20px 0;
			color: #606266;
		}
		.concept-form {
			padding: 20px;
		}
		.rightTable {
			width: calc(100% - 352px);
		}
	}
</style>